$def with (name,priceList,info,r)

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="/static/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="/static/flot/jquery.flot.js"></script>

<link rel="stylesheet" type="text/css" href="/static/style.css" />
<title>虚拟交易市场-历史价格</title>

<div class='content'>
<link rel="html" type="text/html" href="/static/top.html" />
<div class='top'>
<div class='navi'><a href='/orderbook'>交易系统</a></div><div class='navi'>交流区(建设中)</div><div class='navi'>排行榜(建设中)</div><div class='navi'><a href='/welcome'>公告区</a></div>  	
</div>
<div class='sidebar'>
	<h3 style='text-align:center'>当前帐号：$name</h3>
	<fieldset>
		<legend style="color:white">我的信息:</legend>
		<div style='text-align:left'>股票数：</div><div style='text-align:right'>$:int(info[1]) </div>
		<div style='text-align:left'>现金数：</div><div style='text-align:right'>$info[0] </div>
		<div style='margin-top:15px'><a href='/mylog'>我的交易情况</a></div>
	
	</fieldset>
	
	<fieldset>
	<legend style="color:white">进行操作:</legend>
		<a href='/orderbook'>查看所有订单</a><br />
		<a href='/neworder'>前往交易大厅</a><br />
		<a href='/price'>历史成交情况</a>
	</fieldset>
	
	<fieldset>
	<legend style="color:white">我的订单:</legend>
	$if info[2]:
		$if info[2][2] == 1:
			<div style='text-align:left'>订单性质：</div><div style='text-align:right'>卖单</div>
		$else:
			<div style='text-align:left'>订单性质：</div><div style='text-align:right'>买单</div>
		<div style='text-align:left'>价格：</div><div style='text-align:right'>$info[2][0]</div>
		<div style='text-align:left'>订单量：</div><div style='text-align:right'>$info[2][1]</div>
		<div style='margin-top:15px;text-align:center'><a href='/abort'>取消我的订单</a></div>
	$else:
		当前无订单
	</fieldset>
	
	<fieldset>
	<legend style="color:white">账户操作:</legend>
		<a href='/login'>更换账户</a><br />
		<a href='mailto:an@naich.org'>联系充值</a>
	</fieldset>
</div>



<div class='frame'>
<h3>历史股价列表</h3>
<script id="source">

var jqqq = jQuery.noConflict();
jqqq(function () {
    var prices = 
    [
    	$for i in r:
    		[$i[0]*1000,$i[1]],
    ]; 
    
    var volumes = 
    [
    	$for i in r:
    		[$i[0]*1000,$i[2]],
    ]
    
    var max_volume = $:max([i[2] for i in r])

    var plot = jqqq.plot(jqqq("#placeholder"), 
    [{data : prices, label : 'Price', points : {show:true}, lines : {show: true}, color:'red'}, 
     {data : volumes, label : 'Volume', bars : {show: true}, yaxis : 2, color:'yellow'}], 
    {
    	xaxes: [{ mode: "time" }] , 
    	yaxes: 
    	[
    		{min:0},
    		{position:'right', max:max_volume*3}
    	],
    	legend: {position : 'nw' , backgroundColor : 'null'},
        grid: {
            backgroundColor: { colors: ["black","black"] },
            color : "white",
            hoverable : true,
            clickable : true
        }
     });

     
     function showTooltip(x, y, contents) {
        jqqq('<div id="tooltip">' + contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            border: '1px solid #fdd',
            padding: '2px',
            'background-color': 'white',
            opacity: 1,
            color : 'black'
        }).appendTo("body").fadeIn(200);
    }
    
    var previousPoint = null;
    jqqq("#placeholder").bind("plothover", function (event, pos, item) {        
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;
                jqqq("#tooltip").remove();
                var x = new Date(item.datapoint[0]),
                    y = item.datapoint[1].toFixed(2);
                t = (x.getMonth() + 1) +'月'+ x.getDate() +'日'+ x.getHours()+'时'
                
                showTooltip(item.pageX, item.pageY,
                            t + " , 成交均价" + y);
            }
        }
        else {
            jqqq("#tooltip").remove();
            previousPoint = null;            
        }
        
    });    
})
</script>



<div id="placeholder" style="width:500px;height:300px;"></div>
<table border=1>
<tr><th>成交时间</th><th>平均价格</th><th>交易量</th></tr>
	$for order in priceList:
		<tr>
			$for c in order:
				<td>$c</td>	
		</tr>
</table>
</div>
</div>
